<template>
  <div class="qc-tabs">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="全部" name="all">
        <el-alert
          :title="`数据一共${counts}条`"
          type="info"
          :closable="false"
          show-icon
          style="margin-bottom: 20px"
        >
        </el-alert>
        <!-- 表格 -->
        <el-table
          :data="list"
          style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="180"></el-table-column>
          <el-table-column prop="subject" label="学科" width="80"></el-table-column>
          <el-table-column prop="catalog" label="目录" width="100"></el-table-column>
          <el-table-column label="题型" width="80">
            <template v-slot="{ row }">
              {{ questionType.find(item => item.value === +row.questionType).label || '' }}
            </template>
          </el-table-column>
          <el-table-column label="题干" width="180">
            <template v-slot="{ row }">
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180" :formatter="formatTime"></el-table-column>
          <el-table-column label="难度" width="80">
            <template v-slot="{ row }">
              {{ difficulty.find(item => item.value === +row.difficulty).label || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="100"></el-table-column>
          <el-table-column label="审核状态" width="80">
            <template v-slot="{ row }">
              {{ chkType.find(item => item.value === +row.chkState).label || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="180"></el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="100"></el-table-column>
          <el-table-column label="发布状态" width="80">
            <template v-slot="{ row }">
              {{ publishType.find(item => item.value === +row.publishState).label || '' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="240">
            <template>
              <el-button type="text">预览</el-button>
              <el-button type="text">审核</el-button>
              <el-button type="text">修改</el-button>
              <el-button type="text">下架</el-button>
              <el-button type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="end">
          <el-pagination
            style="margin-top: 10px"
            background
            :current-page="this.form.page"
            layout="prev, pager, next, sizes, jumper"
            :total="counts"
            :page-sizes="[5, 10]"
            @size-change="changeSize"
            @current-change="changePage"
            >
          </el-pagination>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="待审核" name="checking">
        <el-alert
          :title="`数据一共${checkingList.length}条`"
          type="info"
          :closable="false"
          show-icon
          style="margin-bottom: 20px"
        >
        </el-alert>
        <el-table
          :data="checkingList"
          style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="180"></el-table-column>
          <el-table-column prop="subject" label="学科" width="80"></el-table-column>
          <el-table-column prop="catalog" label="目录" width="100"></el-table-column>
          <el-table-column label="题型" width="80">
            <template v-slot="{ row }">
              {{ questionType.find(item => item.value === +row.questionType).label || '' }}
            </template>
          </el-table-column>
          <el-table-column label="题干" width="180">
            <template v-slot="{ row }">
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180" :formatter="formatTime"></el-table-column>
          <el-table-column label="难度" width="80">
            <template v-slot="{ row }">
              {{ difficulty.find(item => item.value === +row.difficulty).label || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="100"></el-table-column>
          <el-table-column label="审核状态" width="80">
            <template v-slot="{ row }">
              {{ chkType.find(item => item.value === +row.chkState).label || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="180"></el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="100"></el-table-column>
          <el-table-column label="发布状态" width="80">
            <template v-slot="{ row }">
              {{ publishType.find(item => item.value === +row.publishState).label || '' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="240">
            <template>
              <el-button type="text">预览</el-button>
              <el-button type="text">审核</el-button>
              <el-button type="text">修改</el-button>
              <el-button type="text">下架</el-button>
              <el-button type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已审核" name="checked">
        <el-alert
          :title="`数据一共${checkedList.length}条`"
          type="info"
          :closable="false"
          show-icon
          style="margin-bottom: 20px"
        >
        </el-alert>
        <el-table
          :data="checkedList"
          style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="180"></el-table-column>
          <el-table-column prop="subject" label="学科" width="80"></el-table-column>
          <el-table-column prop="catalog" label="目录" width="100"></el-table-column>
          <el-table-column label="题型" width="80">
            <template v-slot="{ row }">
              {{ questionType.find(item => item.value === +row.questionType).label || '' }}
            </template>
          </el-table-column>
          <el-table-column label="题干" width="180">
            <template v-slot="{ row }">
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180" :formatter="formatTime"></el-table-column>
          <el-table-column label="难度" width="80">
            <template v-slot="{ row }">
              {{ difficulty.find(item => item.value === +row.difficulty).label || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="100"></el-table-column>
          <el-table-column label="审核状态" width="80">
            <template v-slot="{ row }">
              {{ chkType.find(item => item.value === +row.chkState).label || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="180"></el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="100"></el-table-column>
          <el-table-column label="发布状态" width="80">
            <template v-slot="{ row }">
              {{ publishType.find(item => item.value === +row.publishState).label || '' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="240">
            <template>
              <el-button type="text">预览</el-button>
              <el-button type="text">审核</el-button>
              <el-button type="text">修改</el-button>
              <el-button type="text">下架</el-button>
              <el-button type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已拒绝" name="reject">
        <el-alert
          :title="`数据一共${rejectList.length}条`"
          type="info"
          :closable="false"
          show-icon
          style="margin-bottom: 20px"
        >
        </el-alert>
        <el-table
          :data="rejectList"
          style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="180"></el-table-column>
          <el-table-column prop="subject" label="学科" width="80"></el-table-column>
          <el-table-column prop="catalog" label="目录" width="100"></el-table-column>
          <el-table-column label="题型" width="80">
            <template v-slot="{ row }">
              {{ questionType.find(item => item.value === +row.questionType).label || '' }}
            </template>
          </el-table-column>
          <el-table-column label="题干" width="180">
            <template v-slot="{ row }">
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180" :formatter="formatTime"></el-table-column>
          <el-table-column label="难度" width="80">
            <template v-slot="{ row }">
              {{ difficulty.find(item => item.value === +row.difficulty).label || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="100"></el-table-column>
          <el-table-column label="审核状态" width="80">
            <template v-slot="{ row }">
              {{ chkType.find(item => item.value === +row.chkState).label || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="180"></el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="100"></el-table-column>
          <el-table-column label="发布状态" width="80">
            <template v-slot="{ row }">
              {{ publishType.find(item => item.value === +row.publishState).label || '' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="240">
            <template>
              <el-button type="text">预览</el-button>
              <el-button type="text">审核</el-button>
              <el-button type="text">修改</el-button>
              <el-button type="text">下架</el-button>
              <el-button type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import moment from 'moment'
import { difficulty, questionType, chkType, publishType } from '@/api/hmmm/constants'
export default {
  name: 'QCTabs',
  props: {
    counts: {
      type: Number,
      default: 0
    },
    list: {
      type: Array,
      required: true
    },
    form: {
      type: Object,
      required: true
    }
  },
  computed: {
    // 待审核
    checkingList () {
      return this.list.filter(item => +item.chkState === chkType.find(v => v.label === '待审核').value)
    },
    // 已审核
    checkedList () {
      return this.list.filter(item => +item.chkState === chkType.find(v => v.label === '通过').value)
    },
    // 拒绝
    rejectList () {
      return this.list.filter(item => +item.chkState === chkType.find(v => v.label === '拒绝').value)
    }
  },
  data () {
    return {
      activeName: 'all',
      difficulty,
      questionType,
      chkType,
      publishType
    }
  },
  methods: {
    formatTime (row, column, cellValue, index) {
      return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    changeSize (pagesize) {
      this.$emit('changeSize', pagesize)
    },
    changePage (page) {
      this.$emit('changePage', page)
    }
  }
}
</script>

<style scoped lang="less">
.qc-tabs {
  margin-top: 20px;
}
</style>
